import React from "react";
import dynamic from "umi/dynamic";
import { Modal , Steps, Spin, Button } from "antd";
import { openNotificationWithIcon } from "../../../../utils/comm";

const { Step } = Steps;
const StepOne = dynamic({ loader: async () => {
    return import("./StepOne");
  },
});
const StepTwo = dynamic({ loader: async () => {
  return import("./StepTwo");
},
});

class EntrustDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
  };

  handleCancel = () => {
    const { handleEntrustDetailVisible, handleCurrentStep } = this.props;
    handleEntrustDetailVisible(false)
    handleCurrentStep(0);
  };

  handleStepOneSubmit = (values)=> {
    const { handleEntrustDetailData, handleCurrentStep }  = this.props;
    handleEntrustDetailData(values)
    handleCurrentStep(1)
  }

  handleStepTwoSubmit = (values) => {
    const { handleEntrustDetailData }  = this.props;
    handleEntrustDetailData(values, true)
  }

  handleLastStep = (values) => {
    const { handleEntrustDetailData, handleCurrentStep }  = this.props;
    handleCurrentStep(0)
    handleEntrustDetailData(values)
  }

  handleNewCustomedEntrust = () => {
    
  }

  render() {
    const {
      visible,
      confirmLoading,
      entrustDetailData,
      entrustDetailLoaded,
      entrustDetailTitle,
      currentStep,
    } = this.props;
    return (
      <Modal
        title={entrustDetailTitle}
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width="900px"
        centered
        confirmLoading={confirmLoading}
        destroyOnClose
        footer={null}
      >
        <Spin spinning={entrustDetailLoaded}>
          <div>
            <div style={{display: 'flex', justifyContent: 'center', width:'100%'}}>
              <Steps style={{ width: '600px'}} current={currentStep}>
                <Step title="填写委托信息" />
                <Step title="确认委托流程" />
                <Step title="完成" />
              </Steps>
            </div>
            <div style={{height: '400px', display: 'flex', justifyContent: 'center', paddingTop:'50px'}}>
              { currentStep === 0 && (
              <StepOne nextStep={this.handleStepOneSubmit} entrustDetailData={entrustDetailData} />
            )}
              { currentStep === 1 && (
              <StepTwo 
                lastStep={this.handleLastStep} 
                nextStep={this.handleStepTwoSubmit} 
                entrustDetailData={entrustDetailData}
                newCustomedEntrust={this.handleNewCustomedEntrust}
              />
            )}
              { currentStep === 2 && (
              <div style={{ paddingTop: '60px' }}>
                <div>
                  <Button style={{ marginLeft: '5px'}} className='list__btn' type="primary" onClick={this.handleNextStep}>
                    <span>完成</span>
                  </Button>
                </div>
              </div>
            )}
            </div>
          </div>
        </Spin>
      </Modal>
    )
  }
}

export default EntrustDetail;